<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            margin: 0;
        }
        *{
            box-sizing: border-box;
        }
        #tab-bar{
            width: 100%;
            position: fixed;
            bottom:0;
        }
        .tab-item{
            text-align: center;
            line-height: 53px;
            height: 53px;
            width: 25%;
            border: 1px solid black;
            float: left;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id='tab-bar'>
            <div class="tab-item"><router-link to="/">首页</router-link></div>
            <div class="tab-item"><router-link to="/friend">好友</router-link></div>
            <div class="tab-item"><router-link to='/find'>发现</router-link></div>
            <div class="tab-item"><router-link to='/setting'>设置<router-link></div>
        </div>
        <!--
            vue-router中，router-view组件用于显示当前路由地址的组件，router-view具体使用哪个组件取决于当前页面的url的hash值
        -->
        <router-view></router-view>
    </div>
    <script src='vue.js'></script>
    <script src='vue-router.js'></script>
    <script>
        /*
            路由，route,将特定的URL交给特定的函数处理
            在Vue中，将特定的URL映射给特定的组件。
        */
        /*
            页面级组件：显示整个页面的组件；必须全局注册；必须通过路由进行切换。
            普通的组件使用component动态组件切换
        */
        const shouye = {template:'<h1>首页</h1>'}
        const haoyou = {template:'<h1>好友</h1>'}
        const faxian = {template:'<h1>find</h1>'}
        const shezhi = {template:'<h1>setting</h1>'}
        /*
            使用vue-router:(1)定义路由对象
        */
        const router = new VueRouter({
            routes:[
                {path:'/',component:shouye},
                {path:'/friend',component:haoyou},
                {path:'/find',component:faxian},
                {path:'/setting',component:shezhi}
            ]
        })
        new Vue({
            el:'#app',
            router,
        })
    </script>
</body>
</html>